<template>
  <div class="xue-mf-layout--items">
    <div
      class="xue-mf-layout--items--panel"
      v-for="li in componentsList"
      :key="li.label"
    >
      <p v-text="li.label" class="xue-mf-layout--items--panel--label"></p>
      <draggable
        class="xue-mf-layout--items--panel--list"
        v-model="li.list"
        :group="{ name: 'TpFormGroup', pull: 'clone', put: false }"
        :clone="clone"
        :sort="false"
        animation="300"
      >
        <div
          class="xue-mf-layout--items--panel--list--li"
          v-for="item in li.list"
          :key="item.name"
          v-text="item.label"
        ></div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
export default {
  name: 'Items',
  components: { draggable },
  props: {
    componentsList: {
      type: Array,
      default: (_) => [],
    },
  },
  methods: {
    clone(obj) {
      const newObj = Object.assign(_.cloneDeep(obj), {
        fieldId: `${obj.name}_${new Date().getTime()}`,
      })
      return newObj
    },
  },
}
</script>
